<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
            v-on v-if v-else v-show v-for v-html v-text v-bind v-model v-once v-cloak v-pre
         -->
         <!-- 
             v-on是绑定事件的指令 可以绑定所有的事件(键盘事件 鼠标事件 表单事件 触摸事件) 可以缩写为@
             事件绑定修饰符 stop 阻止冒泡 prevent阻止默认事件
             native原生的点击事件 capture捕获 self是绑定给元素自己 once一次性事件
             事件修饰符可以串联
          -->
        <!-- <button v-on:click.stop.prevent="fun">点击</button> -->
        <!-- v-if 和 -v-else的功能必须是同胞元素才会生效 -->
        <!-- <div>
        
        </div> -->
        <!-- 
            v-show v-if都是用来控制元素的显示和隐藏的
            v-show是通过css样式控制元素的显示和隐藏
            v-if是通过创建和删除dom控制元素的显示和隐藏
            如果需要频繁的控制元素的显示和隐藏建议使用v-show
        -->
        <!-- <div v-if="flag">这是要显示的内容</div>
        <div v-else>这是要隐藏的内容</div> -->
        <!-- <ul v-cloak> -->
            <!-- 
                item是数组的数组项 
                不建议v-for和v-if合作使用
            -->
            <!-- <li v-for="(item, i) in arr">{{i+1}}、{{item.name}}</li> -->
            <!-- 
                v-for循环对象 第一个参数是对象的键值对的值 第二个参数是键值对的键
                第三个是键值对的索引值
             -->
            <!-- <li v-for="(value, key, i) in obj">{{i + 1}}、{{key}} {{value}}</li> -->
            <!-- <li v-for="(item, i) in str">{{i+1}}、{{item}}</li> -->
        <!-- </ul> -->
        <!-- v-html会解析内容中的标签 -->
        <!-- <div v-html="content"></div> -->
        <!-- v-text会将内容当做一个纯文本 不会解析标签 -->
        <!-- <div v-text="content"></div> -->
        <!-- v-bind是vue的一个核心指令 可以绑定所有的标签属性包括自定义属性 -->
        <!-- <div v-bind:title="str">英雄联盟</div> -->
        <!-- v-model是一个双向绑定指令 -->
        <!-- <input type="text" v-model="str">
        <p>{{str}}</p> -->
        <!-- v-once 绑定的dom结果值渲染一次 -->
        <div v-pre>{{这是个文本}}</div>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data:{
                // flag: false
                arr: [
                    {
                        name: "时间简史"
                    },
                    {
                        name: "三国演义"
                    },
                    {
                        name: "笑面人"
                    },
                    {
                        name: "茶花女"
                    }
                ],

                obj: {
                    '王亚坤': 110,
                    '李明': 120,
                    '党发亮': 119
                },
                str: '德玛西亚',
                content: '<mark>这是个标记</mark>'
            },
            methods: {
                fun() {
                    console.log(1)
                }
            }
        })
    </script>
</body>
</html>